import React, { Component } from "react";
import "./App.css";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
export default class App extends Component {
  state = {
    todos: [
      { id: "001", name: "吃饭", done: "true" },
      { id: "002", name: "睡觉", done: "false" },
      { id: "003", name: "打炮炮", done: "true" },
      { id: "004", name: "写代码", done: "true" },
      { id: "005", name: "玩游戏", done: "true" },
    ],
  };
  changeChecked = (todo) => {
    const { todos } = this.state;
    todos.forEach((item) => {
      if (item.id === todo.id) {
        console.log(item.id);
        item.done = todo.done.toString();
      }
    });
    this.setState({ todos });
  };
  getData = (data) => {
    const { todos } = this.state;
    //追加一个todo
    const newtodo = [data, ...todos];
    console.log(newtodo);
    this.setState({ todos: newtodo });
  };
  //删除一个li
  deleteLi = (id) => {
    const { todos } = this.state;
    console.log("shanchu" + id);
    const newtodos = todos.filter((item) => {
      return item.id !== id;
    });
    console.log(newtodos);
    this.setState({ todos: newtodos });
  };
  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header length={todos.length} getData={this.getData}></Header>
          <List
            todos={todos}
            changeChecked={this.changeChecked}
            deleteLi={this.deleteLi}
          ></List>
          <Footer></Footer>
        </div>
      </div>
    );
  }
}
